/*
 * 
 * @author sunbudao
 * @time 2020/09/27
 * @since 1.0.0
 * */
// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
import FlagBtn from 'widget/FlagBtn/FlagView'
// 引入antd的组件
import { Form, Select, Button, Modal, Row, Col, Input, Popconfirm, DatePicker } from 'antd'
const FormItem = Form.Item;
const { TextArea } = Input;
const confirm = Modal.confirm;
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'

// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './updateDescSettingListStyle.less'
//引用listPage
import ListPage from 'widget/PageTmpl/ListPage'
import cx from 'classnames'
import Ueditor from 'widget/Editor/Ueditor.js'
import moment from "moment";


const Option = Select.Option;
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */

const updateDescSettingAdminView = function ({ dispatch, model, form }) {

  const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
  const { modelObj, namespace } = model

  let { pageProps1,modalName, visible, detailVisible, detail, biz } = modelObj

  const formItemLayout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
  };
  function goSystem() {
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {
        modalName: "system"
      }
    })
  }
  

  // 获取系统更新数据
  function systemUpgradeDetail(item) {
    dispatch({
      type: `${namespace}/systemUpgradeDetail`,
      payload: item
    })
  }

  function inputChange(value, name) {
    detail[name] = value
    changeState({ detail })
  }
  // 新增编辑系统更新信息
  function systemUpgradeSave() {
    dispatch({
      type: `${namespace}/systemUpgradeSave`,
      payload: {}
    })
  }
  // 删除
  function deleteSystemUpdate(item) {
    // let { data, success } = await systemUpgradeDelete(e)
    dispatch({
      type: `${namespace}/deleteSystemUpdate`,
      payload: item
    })
  }

  //关闭详情弹窗
  function closeModal() {
    changeState({ detailVisible: false })
  }


  const changeState = (payload) => {
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { ...payload }
    })
  }



  let pageProps = {
    // ---------- 界面部分 ----------
    "ui": {
      "api_url": "admin/system/upgrade/list",
      "method": "POST",
      "app": "",
      "params": "",
      "mockData": null,
      // 数据表格
      "table":
      {
        "status_params": "status=0",
        "status_text": "全部",
        // 表头字段列表
        "scroll": { x: 1000 },
        "fields": [
          {
            "en_name": "title",
            "zh_name": "标题",
            width: 300,
            render: (a, item, index, d, e, f) => {
              return <a className={styles.pot} onClick={() => UpdateModal('detail', false, item)}>{a}</a>
            }
          },
          {
            "en_name": "readcount",
            "zh_name": "浏览人数",
            render: (a, item, index, d, e, f) => {
              return <a style={{ color: '#0877FD' }} className={styles.pot} onClick={() => UpdateModal('lookat', true, item)}>{a}</a>
            }
          },
          {
            "en_name": "updatePerson",
            "zh_name": "更新人",
          },
          {
            "en_name": "startDate",
            "zh_name": "更新时间",
            width: 100,
          },
          {
            "en_name": "edit",
            "zh_name": "操作",
            render: (a, item, index, d, e, f) => {
              return (
                <span className={styles.pot}>
                  <FlagBtn node={<a onClick={() => UpdateModal('detail', false, item)}>查看<span className="ant-divider" /></a>}
                    btnId={''}></FlagBtn>
                  <FlagBtn node={
                    <Popconfirm
                      title="你确认删除该数据吗?"
                      onConfirm={() => deleteSystemUpdate(item)}
                      okText="确认"
                      cancelText="取消"
                    >
                      <a>删除</a>
                    </Popconfirm>
                  } btnId={'21102'}> </FlagBtn>
                </span>
              )
            },
            width: 100,
          }
        ]
      },
      "action_bar": [{
        label: '新建',
        type: 'primary',
        btnId: '190201',
        onClick: (e, row) => {
          UpdateModal('add', true)
        }
      }]
    },
  }
  // 浏览用户明细
  
  if (!!modelObj.biz) {
    pageProps.biz = modelObj.biz
    pageProps.biz.syncBackCbf = (biz) => {
      dispatch({
        type: `${namespace}/setFormVal`,
        payload: biz
      })
    }
  }
  //弹出下载框
  function UpdateModal(name, type, item) {
    if (name == 'add') {
      resetFields()
      changeState({ detail: {} })
    }
    if (name == 'detail') {
      systemUpgradeDetail(item)
    }
    if (name == 'delete') {
      systemUpgradeDelete(item)
    }
    if (name == 'lookat') {
      console.log('item',item)
      pageProps1 = {
        // ---------- 界面部分 ----------
        "ui": {
          "api_url": "/admin/system/upgrade/listReadLog",
          "method": "POST",
          "app": "",
          "params": {contentId: item.contentId, pageSize: 10, pageNo: 1},
          "mockData": null,
          // 数据表格
          "table":
          {
            "status_params": "status=0",
            "status_text": "全部",
            // 表头字段列表
            // "scroll": { x: 1000 },
            "fields": [
              {
                "en_name": "index",
                "zh_name": "序号",
                render: (a, item, index, d, e, f) => {
                  return index + 1
                }
              },
              {
                "en_name": "deptName",
                "zh_name": "所属部门",
              },
              {
                "en_name": "accountName",
                "zh_name": "用户姓名",
              },
              {
                "en_name": "account",
                "zh_name": "用户账号",
              },
              {
                "en_name": "readTime",
                "zh_name": "浏览时间",
              },
    
            ]
          },
        },
      }
      console.log('pageProps1',pageProps1)
      changeState({
        pageProps1
      })
    }

    changeState({
      visible: type,
      modalName: name,
    })
  }
  return (
    <div className={cx('pageLayout')}>
      <ListPage pageProps={pageProps} />
      <Modal
        title={modalName == 'lookat' ? '浏览用户明细' : modalName == 'system' ? '消息通知列表' : (modalName == 'add') ? '新增消息通知' : (modalName == 'detail' ? '更新内容详情' : '')}
        visible={visible}
        onCancel={() => {
          UpdateModal('close', false)
        }}
        width={modalName != 'download' ? 1000 : 500}
        footer={null}
      >
        {modalName == "download" &&
          <Table
            columns={columns}
            dataSource={data}
            bordered
            pagination={false}
          />
        }
        {modalName == "download" &&
          <Alert message="提示：各项目的小程序二维码请在【楼盘管理】-【楼盘基本信息管理】列表里面下载" type="success" />
        }
        {/* {modalName == "system" &&
                    <FlagBtn  node={ <Button  className={styles.addButton} type='primary' onClick={() => this.UpdateModal('add',true)}>新增</Button>} btnId={'130102'} />
                } */}
        {modalName == "system" &&
          <ListPage stPage pageProps={this.state.pageProps} />
        }
        {modalName == "lookat" &&
          <ListPage stPage pageProps={pageProps1} />
        }
        {modalName == "add" &&
          <FlagBtn node={<Button type='primary' onClick={() => systemUpgradeSave()}>保存</Button>} btnId={'130104'} />
        }
        {(modalName == "add" || modalName == "detail") &&
          <Form>
            <div className="boxShadow">
              <Row>
                <Col className="col" span={24}>
                  <FormItem
                    {...{ labelCol: { span: 2 }, wrapperCol: { span: 22 } }}
                    label='标题'>
                    {getFieldDecorator('title', {
                      initialValue: detail.title,
                    })(<Input
                      placeholder={'请输入标题'}
                      onChange={(e) => { inputChange(e.target.value, 'title') }}
                    />)}
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col className="col" span={24}>
                  <FormItem
                    {...{ labelCol: { span: 2 }, wrapperCol: { span: 22 } }} label='更新时间'>
                    {getFieldDecorator('startDate', {
                      initialValue: detail.startDate ? moment(detail.startDate) : null,
                    })(<DatePicker
                      placeholder={"请输入更新时间"}
                      onChange={(value, dateString) => { inputChange(dateString, 'startDate') }}
                    />)}
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col className="col" span={24}>
                  <FormItem
                    {...{ labelCol: { span: 2 }, wrapperCol: { span: 22 } }}
                    label='内容'>
                    {(
                      <div>
                        <span style={{
                          fontSize: 12,
                          fontWeight: "normal"
                        }}></span>
                        <Ueditor id="infoDetail"
                          editable={modalName === 'detail' ? false : true}
                          html={detail.detail || ''}
                          title={detail.title || ''}
                          startDate={detail.startDate || ''}
                          endDate={detail.endDate || ''}
                          isShowPhone={false}
                          height={300}
                          enableBtn={true}
                          inputChange={(e) => {
                            inputChange(e, 'detail')
                          }}
                        />

                      </div>
                    )}
                  </FormItem>
                </Col>
              </Row>

            </div>
          </Form>
        }
      </Modal>

      <Modal
        title={null}
        visible={detailVisible}
        footer={null}
        width={860}
        onCancel={() => { closeModal() }}
      >
        <div className={styles.detailcontent}>
          <div className={styles.dTop}>
            <div className={styles.dTitle}>{detail.title}</div>
            <div className={styles.dTime}>发布日期：{detail.startDate}</div>
          </div>
          <div className={styles.dContent}>
            <div className={styles.dContents} dangerouslySetInnerHTML={{ __html: detail.detail }}></div>
          </div>
          <div className={styles.dBottom}> <Button className={styles.confirmBtn} onClick={() => { closeModal() }}>知道了</Button></div>

        </div>
      </Modal>
    </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(updateDescSettingAdminView))
